<template>
  <Row type="flex" :style="finalOutlineStyle"><span :style="finalTitleStyle">{{ title }}</span></Row>
</template>

<script>
export default {
  name: "cfg-title",
  props:{
    title:{
      default:()=>{
        return ''
      }
    },
    titleStyle:{
      default:()=>{
        return {

        }
      }
    },
    outlineStyle:{
      default:()=>{

      }
    }
  },
  computed:{
    finalTitleStyle(){
      return {
        ...{
          fontSize:'36px',
          fontWeight: 'bold'
        },
        ...this.titleStyle
      }
    },
    finalOutlineStyle(){
      return {
        ...{
          display:'flex',
          justifyContent:'center',
          alignItems:'center',
          padding:'5px',
          borderBottom:'1px solid black',
          margin:'2px 0'
        },
        ...this.outlineStyle
      }
    }
  }
}
</script>

<style scoped>

</style>